
<template>
  <div id="whole">
    <div>
      <!-- 导航栏 -->
      <mt-header fixed title="个人资料" style="background: #f49b00">
        <router-link to="" slot="left">
          <mt-button icon="back" @click="$router.go(-1)"></mt-button>
        </router-link>
      </mt-header>
      <div style="height: 40px"></div>
      <van-notice-bar
        color="black"
        text="完善个人资料，提高信誉等级"
        style="margin-bottom: 10px"
      />
    </div>

    <van-form>
      <!-- <van-cell-group inset> -->
      <van-field
        v-model="username"
        name="昵称"
        label="昵称"
        placeholder="昵称"
        :rules="[{ required: true, message: '不能为空' }]"
      />
      <van-field
        v-model="phone"
        name="手机号"
        label="手机号"
        placeholder="手机号"
        :rules="[{ required: true, message: '不能为空' }]"
      />
      <van-field name="uploader" label="修改头像">
        <template #input>
          <van-uploader name='uploadFile' v-model="fileList" multiple :max-count="1" :after-read="afterRead" />
        </template>
      </van-field>
      <!-- </van-cell-group> -->
      <div style="margin: 16px">
        <van-button
          round
          block
          type="warning"
          native-type="submit"
          @click="change"
        >
          提交
        </van-button>
      </div>
    </van-form>

    <!-- <div style="margin: 10px; padding-bottom: 10px">
        <van-cell-group style="padding: 10px 10px; border-radius: 10px">
          <van-field
            label="头像"
            right-icon="warning-o"
            placeholder="点击更换头像"
          />
          <van-field label="昵称" value="" />

          <div id="xingbie">
            <span id="xb">性别</span>
            <van-radio-group v-model="checked" direction="horizontal">
              <van-radio name="1">单选框 1</van-radio>
              <van-radio name="2">单选框 2</van-radio>
            </van-radio-group>
          </div>
        </van-cell-group>
    </div> -->

    <!-- <div style="margin: 10px; padding-bottom: 160px">
      <div id="szdq" style="padding-left: 30px">
        <div style="margin-left: 16px">所在地区</div>
        <van-field
          is-link
          readonly
          label="所在地区"
          placeholder="请选择所在地区"
        />
        <van-popup>
          <van-cascader title="请选择所在地区" />
        </van-popup>
      </div>
    </div> -->
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      username: "",
      phone: "",
      fileList: [{ url: `${this.$store.state.pic}` }],  //图片预览、存放图片url
    };
  },
  mounted() {
    this.username = this.$store.state.username;
    this.phone = this.$store.state.phone;
  },
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      // 创建一个新的FromData
      const fd = new FormData()
      // 这一步是把刚才获取到的图片信息 添加到fd里面
      fd.append('uploadFile',file.file)
      // 这时候就可以向后台发请求了
      // 注意要用post
      // 这里用到了axios来发请求 没有的话要下载 npm install axios
      // 可以在根目录下 package.json中查看
      this.axios.post('/user/upload',fd).then(res=>{
        console.log('111',res);
        this.fileList[0].url = res.data[0]
      })
    },

    // 修改个人资料
    change() {
      let useName = this.username;
      let phone = this.phone;
      let pic = this.fileList[0].url;
      let uid = this.$store.state.uid;
      let params1 = { useName: useName, phone: phone, pic: pic, uid: uid };
      let params2 = { phone: phone, pic: pic, uid: uid };
      if(this.username !== this.$store.state.username){
        this.axios.post("/user/changeAll", params1).then((res) => {
          // console.log(res);
          if (res.data.code == 200) {
            Toast("修改成功！请重新登陆！");
  
            // 调用mutation的方法，修改vuex中的用户名及手机号
            this.$store.commit('updateName',res.data.results[0].useName)
            this.$store.commit('updatePhone',res.data.results[0].phone)
            // 调用mutation的方法，修改vuex中的头像
            this.$store.commit('updatePic',res.data.results.pic)
            window.sessionStorage.clear();
            setTimeout(() => {
              this.$router.push("/login");
            }, 1000);
          }else if(res.data.code == 201){
            Toast("用户名已存在！");
          }
        });
      }else if(this.username == this.$store.state.username){
        this.axios.post("/user/change", params2).then((res) => {
          // console.log(res);
          if (res.data.code == 200) {
            Toast("修改成功！");
            // 调用mutation的方法，修改vuex中的用户名及手机号
            // this.$store.commit('updateName',res.data.results[0].useName)
            this.$store.commit('updatePhone',res.data.results[0].phone)
            // 调用mutation的方法，修改vuex中的用户名及手机号
            this.$store.commit('updatePic',res.data.results.pic)
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
#whole {
  background-color: #fbf7f7;
  height: 100vh;
}

#xb {
  color: #646566;
  font-size: 14px;
}

#xingbie {
  padding: 10px 16px;
}

#szdq {
  background-color: white;
  padding: 20px 20px;
  border-radius: 10px;
  font-size: 18px;
}
::v-deep.van-nav-bar__title van-ellipsis {
  color: white;
}

::v-deep .mint-header-title {
  font-size: 15px;
}
</style>